﻿/*
下面的一些函数实现都是实现和jQuery中的方法类似的功能，你可以完成后和jQuery中对应函数返回結果比较一下
1.
实现jQuery中的:
addClass,
removeClass, 
hasClass三个函数,

函数签名如下，完成下面的代码

//下面是文档注释，你可以看一下jsdoc这个项目，里面有下面注释含义的说明

@param {HTMLElement} ele
@param {String|[]String} classNames
*/

function addClass(ele,classNames){
	if(Object.prototype.toString.call(classNames) == '[object Array]'){	//判断是否为数组
		for(i=0;i<classNames.length;i++){
			ele.className += " "+classNames[i];
		}
	}else{
		if(!ele.className){
			ele.className = classNames;
		}else{
			ele.className += " ";
			ele.className += classNames;
		}
	}
}

function removeClass(ele,classNames) {
	if(Object.prototype.toString.call(classNames) == '[object Array]'){
		for(var i=0;i<classNames.length;i++){
			ele.className = ele.className.replace(classNames[i],"");
		}
	}else{
		ele.className="";
	}
}

function hasClass(ele,classNames) {
	if(Object.prototype.toString.call(classNames) == '[object Array]'){
		for(var i=0;i<classNames.length;i++){
			if(ele.className.match(classNames[i])) return true;
		}
	}else{
		if(ele.className.match(classNames)) return true;
	}
} 

/*2.实现jQuery中的width与height方法：*/

/*JS获取外部CSS样式方法（只能获取，无法设置样式！）
    currentStyle		//ie
    getComputedStyle	//w3c
*/
function getLinkStyle(ele){
	if(navigator.userAgent.indexOf("MSIE")>0){	//判断是否为IE浏览器
		var style = ele.currentStyle;	//IE浏览器。接口：元素名.currentStyle
	}else{	//For W3C ,非IE浏览器。接口：document.defauleView.getComputedStyle(元素名，伪元素":after"[不需要伪元素就null])
		var style = document.defaultView.getComputedStyle(ele,null);	
	}
	return style;
}

function getWidth(ele) {
	var style = getLinkStyle(ele);
	return style.width;
}

function getHeight(ele) {
	var style = getLinkStyle(ele);
	return style.height;
}


/*
3.实现jQuery中的css方法 
@param {String} name css名称，如color,font-size,padding等
@returns {String} 返回CSS设置的值
*/
function css(ele,name) {
	var style = getLinkStyle(ele);
	return style.name;
}

/*
4.设置DOM元素的透明度
@param {Number} opacity 为透明度值，0到1之间的小数，（同CSS规范中的opacity）
*/
function setOpacity(ele,opacity) {
	if(opacity >= 0 && opacity <= 1){
		ele.style.opacity = opacity;
	}else{
		alert("警告：不透明度取值范围是0~1间的小数！");	
	}
}

/*
5.将一个元素的左上角与另一个元素的左上角对齐，使用绝对定位
将ele设为绝对定位，将它的左上角和to的左上角对齐
@param {HTMLElement} to 作为对齐参考对象的元素
*/
function alignTo(ele,to) {
	var css = getLinkStyle(to);
	var to_left = parseFloat(css.left);
	var to_top  = parseFloat(css.top);
	ele.style.position = "absolute";
	ele.style.left = to_left+"px";
	ele.style.top  = to_top+"px";
}